<template>
  <div class="forecast">
    <CesiumCommon />
    <LeftCommon />
    <RightCommon />
  </div>
</template>

<script lang="ts" setup>
import { reactive } from "vue";
import LeftCommon from "./left-common/index.vue";
import RightCommon from "./right-common/index.vue";
import CesiumCommon from "./cesium-common/index.vue";

defineOptions({ name: "ForecastPage" });

const state = reactive({
  name: "vue3",
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.forecast {
  width: 100%;
  height: 100%;
  position: relative;
  .wrapBG {
    width: 100%;
    height: 100%;
    background: url(@/assets/images/bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    z-index: 100;
    pointer-events: none;
  }
}
</style>
